<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
			#main{
				background-color: #ccc;
				width:500px;
				margin: 0 auto;
				border: solid 1px #ccc;
				box-shadow: 1px 1px 1px rgba(0,0,0,1);
				border-radius: 5px 5px;
			}
			
			h1{
				width: 280px;
				margin: 0 auto;
				margin-bottom: 20px;
				text-shadow: 1px 1px 1px black;
			}
			
			h3,p{
				text-align: center;
			}
			
			p{
				font-size: 12px;
			}
	
			section{
				width: 500px;
				padding-top:10px;
				padding-bottom: 10px;
			/*	transition: height 5s;*/
			}
			section:nth-child(odd){
				background-color: rgba(0,0,0,0.6);
				box-shadow: 1px 1px 1px rgba(0,0,0,1);
			}
			
			section:nth-child(odd) p{
				color:white;
			}
			
			section:nth-child(even):hover{
				animation:changeColor 1.5s ease-in-out 0.5s forwards;
				-webkit-animation:changeColor 1.5s ease-in-out 0.5s  forwards;
				cursor: pointer;
			}
			@keyframes changeColor{
				from{background-color: rgba(204,204,204,1);}
				to{background-color: rgba(255,255,255,1);}
			}
			/*@-webkit-keyframes changeColor{
				from{background-color: rgba(204,204,204,1);}
				to{background-color: rgba(255,255,255,1);}
			}*/
			section:nth-child(odd):hover>h3{
				animation:fontAnimate 5s ease;
				-webkit-animation:fontAnimate 5s ease;
				cursor: pointer;
			}
			@keyframes fontAnimate{
				from{font-size: 12px; color:black; font-variant: normal;}
				to{font-size: 20px; color:white; font-variant: small-caps;}
			}
			/*@-webkit-keyframes fontAnimate{
				from{font-size: 12px; color:black; font-variant: normal;}
				to{font-size: 20px color:white; font-variant: small-caps;}
			}*/
		</style>
	</head>
	<body>
		<h1>input type 兼容性</h1>
		<div id="main">	
		<section>
			<h3>button</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="button" value="button"/><br /></div>
		</section>
		<section>
			<h3>color</h3>
			<p>/Edge 14+、
				 Firefox、
				 chrome、
				 Safari 11+、
				 Opera45+、
				 Android Browser 4.4+、
				 chrome for Android、
				 UC Browser for Android 11.4、
				 QQ Browser 1.2、
			</p>
		<div align="center"><input type="color" name="" id="" value="" /><br /></div>
		</section>
		
		<section>
			<h3>date、<br /><del>datetime(datetime类型 被HTML规范剔除)</del>、<br />time</h3>
			<p>/Edge 14+、Firefox 56 57、chrome 49+、
				Opera 45+、ios Safari 9.3部分支持、 Android Browser、
				chrome for Android 59、UC Browser for Android 59、
				QQ Browser 1.2
			</p>
			<div align="center">
				<input type="date" /><br />
				<input type="datetime" /><br />
				<input type="time" /><br />
			</div>
		</section>
		
		
		
		<section>
			<h3>datetime-local</h3>
			<p>/兼容chrome 59,其它兼容性未知！</p>
			<div align="center"><input type="datetime-local" name="" id="" value="" /><br /></div>
		</section>
		
		
		<section>
			<h3>month</h3>
			<p>/兼容chrome 59,其它兼容性未知！</p>
			<div align="center"><input type="month" name="" id="" value="" /><br /></div>
		</section>
		
		<section>
			<h3>week</h3>
			<p>/不兼容chrome 59,其它兼容性未知！</p>
			<div align="center"><input type="week" name="" id="" value="" placeholder="email"/><br /></div>
		</section>
		
		<section>
			<h3>email</h3>
			<p>/不兼容chrome 59,其它兼容性未知！</p>
			<div align="center"><input type="email" name="" id="" value="" /><br /></div>
		</section>
		
		
		<section>
			<h3>file</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="file" name="" id="" value="" /><br /></div>
		</section>
		
	
		
		<section>
			<h3>hidden</h3>
			<p>/兼容性未知！(不知道是隐藏了还是不能兼容)</p>
			<div align="center"><input type="hidden" name="" id="" value="" /><br /></div>
		</section>
		
		<section>
			<h3>image</h3>
			<p>/兼容chrome 59，其它兼容未知！</p>
			<div align="center"><input type="image" name="" id="" value="" src="img/sign4.png" style="width: 20px;"/><br /></div>
		</section>
		
		<section>
			<h3>number</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="number" name="" id="" value="" placeholder="只能输入数字"/><br /></div>
		</section>
		
		
		<section>
			<h3>password</h3>
			<p>/无兼容性问题</p>
			<div align="center">
				<input type="password" name="" id="" value="" placeholder="请输入密码"/><br />
			</div>
		</section>
		
		<section>
			<h3>radio</h3>
			<p>/无兼容性问题</p>
			<div align="center">
				<input type="radio" name="" id="" value="" />radio<br />
			</div>
		</section>
		
		<section>
			<h3>range</h3>
			<p>/ IE 11、 Edge 14+、 Firefox 52+、 chrome 49+、
				Safari 10.1+、Opera 45+、ios safari 10.1、
				Android Broswer 4.4+、chrome 59、UC Browser 11.4、
				QQ Browser 1.2、</p>
			<div align="center"><input type="range" name="" id="" value="" /><br /></div>
		</section>
	
		<section>
			<h3>reset</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="reset" name="" id="" value="reset" /><br /></div>
		</section>
		<section>
			<h3>search</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="search" name="" id="" value="" placeholder="search"/><br /></div>
		</section>
		<section>
			<h3>submit</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="submit" name="" id="" value="submit" /><br /></div>
		</section>
		<section>
			<h3>tel</h3>
			<p>/未知兼容性！</p>
			<div align="center"><input type="tel" name="" id="" value="" placeholder="telephone number"/><br /></div>
		</section>
		<section>
			<h3>text</h3>
			<p>/无兼容性问题</p>
			<div align="center"><input type="text" name="" id="" value="" placeholder="text"/><br /></div>
		</section>
		<section>
			<h3>url</h3>
			<p>/兼容性未知</p>
			<div align="center"><input type="url" name="" id="" value="" placeholder="url" url="http://www.baidu.com" /><br /></div>
		</section>
		</div>
	</body>
</html>
